<template>
    <div class="fluid">
        <div class="bgContainer">
            <div class="container">
                <ul class="ulOne">
                    <li v-for="(item,index) in one" :key="index">
                        <img :src="item[0]">
                        <!-- 遮罩层背景 -->
                        <div class="ulTwo" v-if="redIndex!=index" @mouseover="show(index)">                
                                <p>
                                    <img :src="item[1]">
                                </p>
                                <p>
                                    <img :src="item[2]">
                                </p>
                                <p>{{item[3]}}</p>                 
                        </div>
                        <!-- 红色背景 -->
                        <div class="ulThree" v-if="redIndex==index">
                            <img :src="item[4]">
                            <p>{{item[5]}}</p>
                            <div>
                                <p @click="routeAi(index)">了解更多</p>
                            </div>                  
                        </div>
                    </li>         
                </ul>
            </div>
        </div>
        <mask-toast v-if="showMaskToast" @closeMask="closeMask"></mask-toast>
    </div>
</template>
<script>
const img1 = require("../../assets/img/AI智投选择页/1.png")
const img2 = require("../../assets/img/AI智投选择页/2.png")
const img3 = require("../../assets/img/AI智投选择页/3.png")
const img4 = require("../../assets/img/AI智投选择页/4.png")
const img5 = require("../../assets/img/AI智投选择页/5.png")
const img6 = require("../../assets/img/AI智投选择页/6.png")
const img7 = require("../../assets/img/AI智投选择页/7.png")
const img8 = require("../../assets/img/AI智投选择页/8.png")
const img9 = require("../../assets/img/AI智投选择页/9.png")
const img10 = require("../../assets/img/AI智投选择页/10.png")
const img11 = require("../../assets/img/AI智投选择页/11.png")
const img12 = require("../../assets/img/AI智投选择页/12.png")
const img13 = require("../../assets/img/AI智投选择页/13.png")
const img14 = require("../../assets/img/AI智投选择页/14.png")
const img15 = require("../../assets/img/AI智投选择页/15.png")
const img0 = require("../../assets/img/AI智投选择页/0.png")
import maskToast from '../upgrade/upgradeToast'
export default {
  data() {
    return {
      one: [
        [img3,img1,img0,"品牌传播",img2,"品牌传播"],
        [img6,img4,img0,"产品促销",img5,"产品促销"],
        [img9,img7,img0,"下载APP",img8,"下载APP"],
        [img12,img10,img0,"大号增粉",img11,"大号增粉"],
        [img15,img13,img0,"获取表单",img14,"获取表单"]
    ],
    redIndex : 2,
    debug: true,
    showMaskToast: false
    }
  },
  methods: {
    show(index) {
        this.redIndex = index
    },
    routeAi(index){
        // this.$message('此功能正在升级中。');return;
        // if(this.debug){
        //     this.$router.push('/upgrade');
        //     return;
        // }
        if(this.debug){
            this.showMaskToast = true
            return
        }
        this.$router.push({path:"/createAiPlan",query:{name:this.one[index][3]}});
    },
    closeMask(data){
        this.showMaskToast = data
    }
  },
  components: {
    maskToast
}
}
</script>
<style scoped>
.fluid{
    width:100%;
}
.bgContainer{
    width:100%;
    height: 610px;
    background: url("../../assets/img/AI智投选择页/背景.png");
}
.container{
    width:1200px;
    margin:0 auto;
    margin-top: 80px;
    height: 450px;
    margin-bottom: 80px;
}
.ulOne>li {
  width: 20%;
  float: left;
  height: 450px;
  text-align: center;
  position: relative;
  background: blue;
}
.ulTwo {
  width: 300px;
  height: 450px;
  opacity: 0.9;
  background: #fff;
  position: absolute;
  top: 0;
  left: 0;
  padding:0 30px;
  width:100%;
  box-sizing: border-box;
}
.ulTwo>p:nth-child(1)>img{
    margin-top: 140px;
}
.ulTwo>p:nth-child(2)>img{
    margin-top: 24px;
}
.ulTwo>p:nth-child(3){
    margin-top: 43px;
    font-size: 30px;
    color:rgb(34, 34, 34);
}
.ulThree {
  width: 300px;
  height: 450px;
  opacity: 0.9;
  background: #ed4040;
  position: absolute;
  top: 0;
  left: 0;
  padding:0 30px;
  width:100%;
  box-sizing: border-box;
}
.ulThree>img:nth-child(1){
    margin-top: 100px;
}
.ulThree>p:nth-child(2){
    margin-top: 20px;
    font-size: 30px;
    color:#fff;
}
.ulThree>div:nth-child(3){
    width:111px;
    height: 37px;
    background: url("../../assets/img/媒体优选/切图/14.png");
    text-align:center;
    line-height: 37px;
    cursor: pointer;
    color:#fff;
    font-size: 16px;
    position: absolute;
    left:50%;
    margin-left: -55.5px;
    margin-top: 60px;
}
</style>


